<template>
  <div class="goods-card">
    <img class="goods-cover" :src="props.goods.cover" alt="" />
    <div class="goods-info">
      <div class="goods-name ellipsis">{{ props.goods.name }}</div>
      <div class="goods-price flex flex-start">
        <div class="vip-price-unit">会员价￥</div>
        <div class="vip-price font-500">{{ splitPrice.int || '' }}</div>
        <div class="vip-price-float">{{ splitPrice.decimal || '' }}</div>
        <div class="origin-price">￥{{ props.goods.price }}</div>
      </div>
      <div class="goods-discounts flex flex-start">
        <div
          v-for="(discount, idx) in props.goods.discounts"
          class="goods-discount coupon"
          :key="idx"
        >
          <div class="coupon-type">{{ discount.label }}</div>
          <div class="coupon-text">{{ discount.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { GoodsItem } from '@/types/mall'
import { splitAmount } from '@/utils/utils'
import { computed } from 'vue'

interface GoodsCardProps {
  goods: GoodsItem
}
const props = withDefaults(defineProps<GoodsCardProps>(), {
  goods: () => ({}) as GoodsItem,
})
const splitPrice = computed(() => {
  if (props.goods.vipPrice) {
    return splitAmount(props.goods.vipPrice)
  }
  return { int: '0', decimal: '.00' }
})
</script>
<style lang="scss" scoped>
.goods-card {
  line-height: 1;
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(133, 127, 127, 0.18);
}
.goods-cover {
  width: 100%;
  height: 170px;
  border-radius: 6px;
}
.goods-info {
  padding: 10px 7px;
  box-sizing: border-box;
}
.goods-name {
  font-weight: bold;
  color: #000;
  font-size: 12px;
  line-height: 16px;
}
.goods-price {
  margin-top: 8px;
  .vip-price-unit,
  .vip-price-float {
    color: #ec3a3c;
    font-size: 10px;
    margin-top: 2px;
  }
  .vip-price {
    color: #ec3a3c;
    font-size: 14px;
  }
  .vip-price-float {
    margin-top: 4px;
  }
  .origin-price {
    margin-left: 10px;
    font-size: 10px;
    margin-top: 2px;
    color: #333;
    text-decoration: line-through;
  }
}
.goods-discounts {
  margin-top: 6px;
  overflow: hidden;
}
</style>
